{extend name="admin@public:layout" /}
{block name="content"}
<style>
.dragsort {width: 400px; padding-left: 0px; }
.dragsort li b {display: none; float: right; padding: 0 6px; font-weight: bold; color: #000; }
.dragsort li:hover b {display: block; }
.edit_sort {display: inline-block; border: 1px solid #cdcdcd; color: #404040; line-height: 35px; width: 20%; height: 376px; }
.edit_sort span {background: #EEEEEE; width: 100%; display: inline-block; font-weight: bold; text-indent: 10px; border-bottom: 1px solid #cdcdcd; margin-bottom: 5px; }
.edit_sort ul {padding: 0 5px; overflow-y: scroll; height: 334px; }
.dragsort li {margin-bottom: 5px; padding: 0 6px; height: 30px; line-height: 30px; border: 1px solid #eee; background-color: #fff; overflow: hidden; }
.dragsort li em {font-style: normal; }
</style>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title"><a class="back" href="{:url('hooks')}" title="返回列表"><i class="icon iconfont icon-fanhui"></i></a>
            <div class="subject">
                <h3>行为管理 - {present name="data"}编辑{else/}新增{/present}钩子</h3>
                <h5>行为标签管理中心</h5>
            </div>
        </div>
    </div>
    <form action="{:url('updateHook')}" method="post" class="form-horizontal">
        <div class="ncap-form-default">
            <dl class="row">
                <dt class="tit">
                    <label>行为名称</label>
                </dt>
                <dd class="opt">
                    <input type="text" class="input-txt" name="name" id="title" value="{$data.name}" />
                    <p class="notic">输入行为标识 英文字母</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>行为描述</label>
                </dt>
                <dd class="opt">
                    <textarea name="description" rows="6" class="tarea">{$data.description}</textarea>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="pid">上级菜单</label>
                </dt>
                <dd class="opt">
                    <select name="type">
                        <option value="1" {eq name="data.type" value="1" } selected{/eq}>视图</option>
                        <option value="2" {eq name="data.type" value="2" } selected{/eq}>控制器</option>
                    </select>
                    <p class="notic">视图:表示是在模板渲染过程中的<br>控制器:表示是在程序逻辑中的！</p>
                </dd>
            </dl>
            {present name="data"}
            <input type="hidden" name="addons" value="{$data.addons}" readonly>
            <dl class="row">
                <dt class="tit">
                    <label>钩子挂载的插件排序</label>
                </dt>
                <dd class="opt">
                    {empty name="data.addons"} 暂无插件，无法排序 {else/}
                    <ul id="sortUl" class="dragsort">
                        {volist name=":explode(',',$data['addons'])" id="addons_vo"}
                        <li class="getSort"><b>&times;</b><em>{$addons_vo}</em></li>
                        {/volist}
                    </ul>
                    <script type="text/javascript">
                    $(function() {
                        $("#sortUl").dragsort({
                            dragSelector: 'li',
                            placeHolderTemplate: '<li class="draging-place">&nbsp;</li>',
                            dragEnd: function() {
                                updateVal();
                            }
                        });

                        $('#sortUl li b').click(function() {
                            $(this).parent().remove();
                            updateVal();
                        });

                        // 更新排序后的隐藏域的值
                        function updateVal() {
                            var sortVal = [];
                            $('#sortUl li').each(function() {
                                sortVal.push($('em', this).text());
                            });
                            $("input[name='addons']").val(sortVal.join(','));
                        }
                    })
                    </script>
                    {/empty}
                    <p class="notic">拖动后保存顺序，影响同一个钩子挂载的插件执行先后顺序</p>
                </dd>
            </dl>
            {/present}
            <input type="hidden" name="id" value="{$data.id}">
            <div class="fix-bot"><a href="JavaScript:void(0);" class="ncap-btn-big ncap-btn-green ajax-post" target-form="form-horizontal">确认提交</a></div>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/admin/js/jquery.dragsort-0.5.2.min.js"></script>
{/block}